/* 科技感表格样式 */

.custom-table-container {
  position: relative;
  width: 100%;
  padding: 8px;
  overflow-y: auto;
  color: #fff;
  background: linear-gradient(135deg, #1c1e28, #11131a); // 深色背景+渐变
  border-radius: 8px; // 圆角
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); // 外部阴影

  /* 隐藏滚动条 */
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
}

.custom-table-container::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

.custom-table {
  width: 100%;
  overflow: hidden; // 避免圆角与边框的冲突
  border-radius: 8px; // 表格圆角
  border-collapse: collapse;
}

.custom-table th,
.custom-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); // 半透明分隔线
}

.custom-table th {
  position: sticky;
  top: 0;
  z-index: 10; // 提高表头的 z-index，确保其显示在表格上方
  color: #9a9cad; // 灰色表头文字
  font-size: 14px;
  text-transform: uppercase;
  background: rgba(30, 32, 40, 0.85); // 表头半透明背景
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); // 表头阴影
  backdrop-filter: blur(10px); // 背景模糊效果
}

.custom-table td {
  color: #d6d9e0; // 表格行的文字颜色
  background-color: rgba(30, 32, 40, 0.85); // 表格行的半透明背景
}

tbody tr:nth-child(odd) {
  background-color: rgba(35, 37, 50, 0.85); // 奇数行背景稍暗
}

tbody tr:hover {
  color: #ffffff; // 悬停时文字变亮
  background: linear-gradient(135deg, #3a3f57, #4b536e); // 悬停时的背景高亮
  box-shadow: 0 0 8px rgba(24, 144, 255, 0.7); // 悬停时的阴影发光效果
  transform: scale(1.02); // 悬停时稍微放大效果
  transition: all 0.3s ease-in-out; // 动画效果
}

.ellipsis-cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bordered {
  border: 1px solid #3e4455; // 边框颜色
  box-shadow: 0 0 12px rgba(24, 144, 255, 0.5); // 边框发光效果
}

.highlight-number {
  color: #58b5f7; // 代码增量的高亮颜色
  font-weight: bold;
  font-size: 18px;
}

.department-cell {
  color: #9a9cad; // 部门名称的颜色
  font-size: 16px;
}

tbody tr + tr {
  border-top: 1px solid rgba(255, 255, 255, 0.1); // 表格行之间的分割线
}

.sort-arrows {
  display: inline-flex;
  flex-direction: column;
  margin-left: 8px;
  cursor: pointer;
}

.sort-arrow {
  color: #ccc;
  font-size: 12px;
}

.sort-arrow.active {
  color: #1890ff;
}

.sort-arrow:hover {
  color: #1890ff;
}

/* 固定表头效果 */
.sticky-header thead {
  position: sticky;
  top: 0;
  z-index: 10; // 确保表头始终显示在表格内容之上
  background: rgba(30, 32, 40, 0.95); // 固定表头背景加深一点
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); // 表头的阴影效果
  backdrop-filter: blur(5px); // 模糊效果保持
}

.sticky-header {
  thead {
    position: sticky;
    top: 0;
    z-index: 1000; // 增加 z-index 值
    background: rgba(30, 32, 40, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
  }

  th {
    position: sticky;
    top: 0;
    z-index: 1000; // 确保每个th元素也有较高的z-index
  }
}
